<template>
  <div>
    <vxe-modal ref="xModal" v-model="isShowAddOrUpdateEmployeeModal" title="编辑&保存" width="800" :zIndex="999" resize destroy-on-close>
      <vxe-form ref="xForm" :data="formData" :rules="formRules" title-align="right" title-width="100" @submit="submitEvent">
        <vxe-form-item title="添加客户" span="24" title-align="left" title-width="200px" :title-prefix="{icon: 'fa fa-address-card-o'}"></vxe-form-item>
        <vxe-form-item title="名称" field="name" span="12" :item-render="{name: 'input', attrs: inputAttrs}"></vxe-form-item>
        <vxe-form-item title="简称" field="shortName" span="12" :item-render="{name: 'input', attrs: inputAttrs}"></vxe-form-item>
        <vxe-form-item title="助记码" field="mnemonicCode" span="12" :item-render="{name: 'input', attrs: inputAttrs}"></vxe-form-item>
        <vxe-form-item title="座机号" field="telephone" span="12" :item-render="{name: 'input', attrs: inputAttrs}"></vxe-form-item>
        <vxe-form-item title="邮编" field="postcode" span="12" :item-render="{name: 'input', attrs: inputAttrs}"></vxe-form-item>
        <vxe-form-item title="分类" field="category" span="12" :item-render="{name: 'Select', attrs: {disabled: isShowDetail}, props: {filterable: true}, options: categoryList}"></vxe-form-item>
        <vxe-form-item title="法人代表" field="legalPersonContactId" span="12" :item-render="{name: 'Select', attrs: {disabled: isShowDetail}, props: {filterable: true}, options: contactList}"></vxe-form-item>
        <vxe-form-item title="业务代表" field="businessAgentContactId" span="12" :item-render="{name: 'Select', attrs: {disabled: isShowDetail}, props: {filterable: true}, options: contactList}"></vxe-form-item>
        <vxe-form-item title="收货人" field="consigneeContactId" span="10" :item-render="{name: 'Select', attrs: {disabled: isShowDetail}, props: {filterable: true}, options: contactList}"></vxe-form-item>
        
        <vxe-form-item title="省份" field="province" span="4" :item-render="{name: 'Select', attrs: {disabled: isShowDetail}, props: {filterable: true}, options: []}"></vxe-form-item>
        <vxe-form-item title="城市" field="city" span="4" :item-render="{name: 'Select', attrs: {disabled: isShowDetail}, props: {filterable: true}, options: []}"></vxe-form-item>
        <vxe-form-item title="区" field="county" span="4" :item-render="{name: 'Select', attrs: {disabled: isShowDetail}, props: {filterable: true}, options: []}"></vxe-form-item>
        <vxe-form-item title="地址" field="address" span="24" :item-render="{name: 'input', attrs: inputAttrs}"></vxe-form-item>
        
        <vxe-form-item title="标签" span="24">
          <vxe-checkbox-group v-model="formData.tags">
            <vxe-checkbox v-for="item in tagList" :key="item.value" :label="item.value" :disabled="isShowDetail">{{ item.label }}</vxe-checkbox>
          </vxe-checkbox-group>
        </vxe-form-item>
        <vxe-form-item title="备注" field="remark" span="24" :item-render="{name: 'textarea', attrs: inputAttrs}"></vxe-form-item>
        <vxe-form-item title="开票资料" span="24" title-align="left" title-width="200px" :title-prefix="{message: '请填写必填项', icon: 'fa fa-info-circle'}"></vxe-form-item>
        <vxe-form-item title="单位名称" field="unitName" span="12" :item-render="{name: 'input', attrs: inputAttrs}"></vxe-form-item>
        <vxe-form-item title="税号" field="taxNumber" span="12" :item-render="{name: 'input', attrs: inputAttrs}"></vxe-form-item>
        <vxe-form-item title="开户行" field="openingBank" span="12" :item-render="{name: 'input', attrs: inputAttrs}"></vxe-form-item>
        <vxe-form-item title="银行账户" field="bankAccount" span="12" :item-render="{name: 'input', attrs: inputAttrs}"></vxe-form-item>
        <vxe-form-item title="注册地址" field="registAddress" span="12" :item-render="{name: 'input', attrs: inputAttrs}"></vxe-form-item>
        <vxe-form-item title="办公地址" field="officeAddress" span="12" :item-render="{name: 'input', attrs: inputAttrs}"></vxe-form-item>
        <vxe-form-item title="开票电话" field="invoiceTelephone" span="12" :item-render="{name: 'input', attrs: inputAttrs}"></vxe-form-item>
        <vxe-form-item title="传真号" field="faxNumber" span="12" :item-render="{name: 'input', attrs: inputAttrs}"></vxe-form-item>

        <vxe-form-item align="center" span="24" :visible-method="isDetail">
          <vxe-button type="submit" status="primary">保存</vxe-button>
          <vxe-button type="reset">重置</vxe-button>
          <vxe-button @click="close()">取消</vxe-button>
        </vxe-form-item>
      </vxe-form>
    </vxe-modal>
  </div>
</template>
<script>
import { supplierApi } from '@/api/supplier/supplier';
import { supplierTagApi } from '@/api/supplier/supplier-tag'
import { supplierCategoryApi } from '@/api/supplier/supplier-category'
import { contactApi } from '@/api/contact'
export default {
  name: 'SupplierTableAdd',
  components: {
  },
  props: {
  },
  data() {
    return {
      isShowAddOrUpdateEmployeeModal: false,
      isShowLoading: false,
      contactList: [],
      categoryList: [],
      tagList: [],
      isShowDetail: false,
      inputAttrs: {
        placeholder: '请输入', 
        disabled: false
      },
      formData: {
        id: 0,
        name: '',
        shortName: '',
        mnemonicCode: '',
        telephone: '',
        postcode: '',
        category: 0,
        legalPersonContactId: 0,
        businessAgentContactId: 0,
        consigneeContactId: 0,
        province: 0,
        city: 0,
        county: 0,
        address: '',
        tags: [],
        remark: '',
        unitName: '',
        taxNumber: '',
        openingBank: '',
        bankAccount: '',
        registAddress: '',
        officeAddress: '',
        invoiceTelephone: '',
        faxNumber: ''
      },
      formRules: {
        name: [
          { required: true, message: '姓名不能为空', trigger: 'blur' }
        ],
        sex: [
          { required: true, message: '性别不能为空', trigger: 'blur' }
        ],
        mobilePhone: [
          { required: true, message: '手机号不能为空', trigger: 'blur' },
          {
            pattern: /^(13|14|15|16|17|18)\d{9}$/,
            message: '手机号格式错误',
            trigger: 'blur'
          }
        ]
      }
    };
  },
  computed: {},
  watch: {
  },
  filters: {},
  created() {
    this.getContactList();
    this.getCategoryList();
    this.getTagList();
  },
  mounted() {
  },
  beforeCreate() {},
  beforeMount() {},
  beforeUpdate() {},
  updated() {},
  beforeDestroy() {},
  destroyed() {},
  activated() {},
  methods: {
    // 打开Modal
    showModal(row, isDetail) {
      if (isDetail !== undefined && isDetail) {
        this.isShowDetail = isDetail;
        this.inputAttrs.placeholder = '';
        this.inputAttrs.disabled = true;
      } else {
        this.isShowDetail = false;
        this.inputAttrs.placeholder = '请输入';
        this.inputAttrs.disabled = false;
      }
      if (row && Object.keys(row).length > 0) {
        this.formData = Object.assign({}, row);
        let tags = [];
        row.tags.split(',').forEach(element => {
          tags.push(parseInt(element));
        });
        this.formData.tags = tags;
      } else {
        this.formData = {};
      }
      this.isShowAddOrUpdateEmployeeModal = true;
    },
    // isDetail
    isDetail({data, property}) {
      return !this.isShowDetail;
    },
    close() {
      this.$Modal.confirm({
        title: '友情提醒',
        content: '确定要关闭吗?关闭后表单会被重置!',
        onOk: () => {
          this.$refs.xModal.close();
        }
      });
    },
    // 点击提交
    submitEvent() {
      if (this.formData.id) {
        this.update(this.formData);
      } else {
        this.add(this.formData);
      }
    },
    // 修改成员
    async update(data) {
      try {
        let reqData = Object.assign({}, data);
        if (data.tags !== undefined) {
          reqData.tags = data.tags.join(',');
        }
        this.isShowLoading = true;
        let result = await supplierApi.update(reqData);
        this.isShowAddOrUpdateEmployeeModal = false;
        this.$Message.success('修改成功');
        this.$emit('addSuccess');
      } catch (e) {
        //TODO zhuoda sentry
        console.error(e);
      } finally {
        this.isShowLoading = false;
      }
    },
    // 添加新用户接口
    async add(data) {
      try {
        let reqData = Object.assign({}, data);
        if (data.tags !== undefined) {
          reqData.tags = data.tags.join(',');
        }
        this.isShowLoading = true;
        let result = await supplierApi.add(reqData);
        this.isShowAddOrUpdateEmployeeModal = false;
        this.$Message.success('添加成功');
        this.$emit('addSuccess');
      } catch (e) {
        //TODO zhuoda sentry
        console.error(e);
      } finally {
        this.isShowLoading = false;
      }
    },
    getContactList() {
      contactApi.getAll().then((response) => {
        let contactList = [
          {label: '', value: ''}
        ];
        response.data.forEach(element => {
          contactList.push({
            value: element.id,
            label: element.name
          });
        });
        this.contactList = contactList;
      }).catch(error => {
        console.log(error);
      });
    },
    getCategoryList() {
      supplierCategoryApi.getAll().then((response) => {
        let cateList = [
          {label: '', value: ''}
        ];
        response.data.forEach(element => {
          cateList.push({
            value: element.id,
            label: element.category
          });
        });
        this.categoryList = cateList;
      }).catch(error => {

      });
    },
    getTagList() {
      supplierTagApi.getAll().then((response) => {
        let tagList = [];
        response.data.forEach(element => {
          tagList.push({
            value: element.id,
            label: element.tag 
          });
        });
        this.tagList = tagList;
      }).catch(error => {

      });
    }
  }
};
</script>
